<template>
    <view>
        <form>
            <view class="cu-card margin radius">
                <view class="cu-form-group margin-top">
                    <view class="title">项目编号</view>
                    <view>{{ dataInfo.projectNo }}</view>
                </view>
                <view class="cu-form-group ">
                    <view class="title">项目名称</view>
                    <view>{{ dataInfo.projectName }}</view>
                </view>
            </view>

            <view class="cu-form-group">
                <view class="title">发起人</view>
                <view>{{ dataInfo.duser }}</view>
            </view>
            <view class="cu-form-group">
                <view class="title">验收方式</view>
                <view>
                    <picker @change="PickerChange" :value="dataInfo.yuyanshou_type" :range="picker">
                        <view class="picker">
                            {{dataInfo.yuyanshou_type>-1?picker[dataInfo.yuyanshou_type]:'线下验收'}}
                        </view>
                    </picker>

                </view>
            </view>
            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white">
                <view class="action">参与人</view>
            </view>
            
            <view class="cu-form-group">
                <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="请输入参与人"></textarea>
            </view>

            

            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white">
                <view class="action">图片上传</view>
            </view>

            <file-upload :uploadOptions="uploadOptions" :imgList="dataInfo.dImageList" @imgListChange="imgListChange"></file-upload>
            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white" @click="addDetail">
                <view class="action">整改项<text class="cuIcon-roundadd padding text-red"></text></view>
                
            </view>
            <view class="cu-card">
                <view class="cu-item shadow">
                    
                    <view class="cu-form-group">
                        <view class="title">整改项</view>
                        <view>现场整改</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">整改措施</view>
                        <view>现场整改现场整改现场整改现场整改现场整改现场整改</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">整改日期</view>
                        <view>2024-03-12</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">文件上传</view>
                        <view class="grid col-4 grid-square flex-sub">
                            <view
                            class="bg-img"
                            v-for="(item, index) in imageUrl"
                            :key="index"
                            @tap="ViewImage(imageUrl,$event)"
                            :data-url="imageUrl[index]"
                            >
                            <image :src="imageUrl[index]" mode="aspectFill"></image>
                            <!-- <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                <text class="cuIcon-close"></text>
                            </view> -->
                        </view>
                    </view>

                </view>
                <view class="cu-bar bg-white">
                    <view class="action"></view>
                    <view>
                        <text class="cuIcon-writefill text-sl "></text>
                        <text class="cuIcon-deletefill padding text-sl text-red"></text>
                    </view>
                    
                </view>

            </view>
            <view class="cu-item shadow">
                    
                    <view class="cu-form-group">
                        <view class="title">整改项</view>
                        <view>现场整改</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">整改措施</view>
                        <view>现场整改现场整改现场整改现场整改现场整改现场整改</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">整改日期</view>
                        <view>2024-03-12</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">文件上传</view>
                        <view class="grid col-4 grid-square flex-sub">
                            <view
                            class="bg-img"
                            v-for="(item, index) in imageUrl"
                            :key="index"
                            @tap="ViewImage(imageUrl,$event)"
                            :data-url="imageUrl[index]"
                            >
                            <image :src="imageUrl[index]" mode="aspectFill"></image>
                            <!-- <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                <text class="cuIcon-close"></text>
                            </view> -->
                        </view>
                    </view>

                </view>
                <view class="cu-bar bg-white">
                    <view class="action"></view>
                    <view>
                        <text class="cuIcon-writefill text-sl "></text>
                        <text class="cuIcon-deletefill padding text-sl text-red"></text>
                    </view>
                    
                </view>

            </view>
          </view>
          <view style="height: 80px" v-if="showButton"></view>
            <view class="btn-group cu-bar foot" v-if="showButton">
                <button class="cu-btn bg-green shadow-blur">
                    提交
                </button>
            </view>
        </form>
        <add-detail :modalNameDetail="modalNameDetail" @modalNameDetailEmit="modalNameDetailEmit" v-if="showAddDetail"></add-detail>
        
    </view>
</template>
<script>
import addDetail from './addDetail.vue'
export default {
    components:{
        addDetail
    },
    data(){
        return{
            date: '2024-03-12',
            modalName: null,
            imgList:[],
            uploadOptions:{},
            imageUrl: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            modalNameDetail: null,
            showAddDetail:false,
            dataInfo:{
            },
            picker: ['线下验收','线上验收'],
            showButton : true
        }
    },
    onLoad(params){
        this.uploadFile = true
		// let item = JSON.parse(params.item);
		let item = params;
		this.$u.api.zfgs.prePmConnectwaterjobForm({id:item.id}).then(res=>{
			this.dataInfo = res.pmPreacceptance
			// this.dataInfo = {
			// 	iswatersupply:res.pmProjectinformation.iswatersupply,
			// 	projectno:res.pmProjectinformation.projectno,
			// 	projectname:res.pmProjectinformation.projectname,
			// 	isNewRecord:res.pmProjectinformation.isNewRecord,
			// 	id:res.pmProjectinformation.id,
			// }
			
		})
    },
    methods:{
        DateChange(e) {
            this.date = e.detail.value
        },
        textareaAInput(e){
            this.dataInfo.dmark = e.detail.value
        },
        addDetail(){

            this.showAddDetail = true
            
            this.modalNameDetail = 'bottomModal'

            console.log(this.modalNameDetail)
        },
        modalNameDetailEmit(e){
            this.modalNameDetail = e
        },

        ViewImage(imageList,e) {
            uni.previewImage({
                urls: imageList,
                current: e.currentTarget.dataset.url
            });
        },
        DelImg(e) {
            uni.showModal({
                title: '',
                content: '确定要删除吗？',
                cancelText: '取消',
                confirmText: '确认',
                success: res => {
                    if (res.confirm) {
                        this.$delete(this.dataInfo.dImageListst, e.currentTarget.dataset.index);
                    }
                }
            })
        },
        ChooseImage() {
            uni.chooseImage({
                count: 4, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: (res) => {
                    if (this.dataInfo.dImageList.length != 0) {
                        this.dataInfo.dImageListst = this.dataInfo.dImageList.concat(res.tempFilePaths);
                    } else {
                        this.dataInfo.dImageList = res.tempFilePaths;
                    }
                    
                    console.log(this.dataInfo,'this.dataInfo')
                    this.$u.toast("上传成功");
                }
            });
        },
        PickerChange(e){
            console.log(e.detail.value)
            this.dataInfo.yuyanshou_type = e.detail.value
        }

    }
}
</script>
<style lang="scss" scoped>
.action{
    color: #303133;
}
.cu-form-group{
    flex-wrap: wrap
}
.text-sl{
    font-size: 22px !important;
}
.cu-bar {
  min-height: 80px;
}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    z-index: 997;
    background: #fff;
}
</style>